<template>
    <div class="user-profile">
        <!-- 导航栏 -->

        <van-nav-bar class="page-nav-bar" title="个人信息" left-arrow @click-left="$router.back()" />
        <!-- 个人信息 -->
        <input type="file" hidden ref="file" @change="onFileChange">
        <van-cell title="头像" is-link @click="$refs.file.click()">
            <van-image class="avatar" round width="30" height="30" fit="cover" :src="user.photo" />
        </van-cell>
        <van-cell @click="isUpdateNameShow = true" title="昵称" :value="user.name" is-link />
        <van-cell @click="isUpdateGenderShow = true" title="性别" :value="user.gender === 0 ? '男' : '女'" is-link />
        <van-cell @click="isUpdateBirthdayShow = true" title="生日" :value="user.birthday" is-link />

        <!-- 编辑姓名 -->
        <van-popup v-model="isUpdateNameShow" style="height: 100%" position="bottom">
            <UpdateName v-if="isUpdateNameShow" v-model="user.name" @colse="isUpdateNameShow = false" />
        </van-popup>
        <!-- /编辑姓名 -->

        <!-- 编辑性别 -->
        <van-popup v-model="isUpdateGenderShow" position="bottom">
            <UpdateGender v-if="isUpdateGenderShow" @colse="isUpdateGenderShow = false" v-model="user.gender" />
        </van-popup>
        <!-- /编辑性别 -->


        <!-- 编辑生日 -->
        <van-popup v-model="isUpdateBirthdayShow" position="bottom">
            <UpdateBirthday v-if="isUpdateBirthdayShow" @colse="isUpdateBirthdayShow = false" v-model="user.birthday" />
        </van-popup>
        <!-- /编辑生日 -->


        <!--  编辑头像 -->
        <van-popup v-model="isUpdatePhotoShow" position="bottom" style="height:100%">
            <UpdatePhoto :img="img" @colse="isUpdatePhotoShow=false" @update-photo="user.photo=$event" v-if="isUpdatePhotoShow" />
        </van-popup>
        <!--  编辑头像 -->
    </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import UpdateName from './components/update-name.vue'
import UpdateGender from './components/update-gender.vue'
import UpdateBirthday from './components/update-birthday.vue'
import UpdatePhoto from './components/update-photo.vue'
export default {
    name: 'UserIndex',
    mixins: [],
    components: {
        UpdateName, UpdateGender, UpdateBirthday, UpdatePhoto
    },
    props: {},
    data() {
        return {
            user: {},//个人信息
            isUpdateNameShow: false,
            isUpdateGenderShow: false,
            isUpdateBirthdayShow: false,
            isUpdatePhotoShow: false,
            img: null //预览的图片
        }
    },
    computed: {},
    watch: {},
    created() {
        this.loadUserProfile()
    },
    mounted() { },
    methods: {
        async loadUserProfile() {
            try {
                const { data } = await getUserProfile()
                this.user = data.data
            } catch (err) {
                this.$toast('获取失败，请重试')
            }
        },
        // 更新头像
        onFileChange() {
            // 获取文件对象
            const file = this.$refs.file.files[0]
            // 基于文章对象获取blob数据
            this.img = window.URL.createObjectURL(file)
            // 展示预览图片弹出层
            this.isUpdatePhotoShow = true
            // file-input 如果选了同一个文件不会触发 change 事件
            // 解决办法就是每次使用完毕，把它的 value 清空
            this.$refs.file.value =''
        }
    }
}
</script>

<style scoped lang="less">
.avatar {
    width: 60px;
    height: 60px;
}

.van-popup {
    background-color: #f5f7f9;
}
</style>